<template>
  <div class="content">
    <div class="scroll-view-box">
      <el-form label-width="120px" :model="sgjlRuleForm" :rules="sgjlRules" ref="sgjlRuleForm" inline
        label-position="top">
        <el-form-item label="项目名称" prop="project_id">
          <el-select class="input-width" v-model="sgjlRuleForm.project_id" placeholder="请选择" filterable clearable>
            <el-option v-for="item in projectList" :key="item.id" :label="item.project_name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="施工阶段" prop="construction_stage_id">
          <el-select multiple class="input-width" @change="constructionStageFunc"
            v-model="sgjlRuleForm.construction_stage_id" placeholder="请选择" filterable clearable>
            <el-option v-for="item in constructionStageList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="施工进度" prop="construction_progress">
          <el-select class="input-width" v-model="sgjlRuleForm.construction_progress" placeholder="请选择" filterable
            clearable>
            <el-option v-for="item in constructionProgressList" :key="item.value" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="施工内容" prop="content">
          <el-input class="input-width" v-model="sgjlRuleForm.content"></el-input>
        </el-form-item>
        <el-form-item label="是否超期" prop="is_overdue">
          <div class="input-width">
            <el-radio-group v-model="sgjlRuleForm.is_overdue" size="small">
              <el-radio :label="1">已超期</el-radio>
              <el-radio :label="2">未超期</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="超期原因" prop="reason_overdue" v-if="sgjlRuleForm.is_overdue == 1">
          <el-input class="input-width" v-model="sgjlRuleForm.reason_overdue"></el-input>
        </el-form-item>
        <el-form-item label="超期类型" prop="overdue_type_id" v-if="sgjlRuleForm.is_overdue == 1">
          <el-select @change="overdueTypeChangeFunc" class="input-width" v-model="sgjlRuleForm.overdue_type_id"
            placeholder="请选择" filterable clearable>
            <el-option v-for="item in overdueTypeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="超期完工日期" prop="overdue_completion_date" v-if="sgjlRuleForm.is_overdue == 1">
          <el-date-picker value-format="yyyy-MM-dd" class="input-width" v-model="sgjlRuleForm.overdue_completion_date"
            clearable type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预计完工日期" prop="estimated_completion_date">
          <el-date-picker value-format="yyyy-MM-dd" class="input-width" v-model="sgjlRuleForm.estimated_completion_date"
            clearable type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="风险标签" prop="risk_label" v-if="sgjlRuleForm.is_overdue == 1">
          <el-select class="input-width" v-model="sgjlRuleForm.risk_label" placeholder="请选择" filterable clearable>
            <el-option label="一次预警" value="一次预警"></el-option>
            <el-option label="二次预警" value="二次预警"></el-option>
            <el-option label="已超期" value="已超期"></el-option>
            <el-option label="停工" value="停工"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input class="input-width" v-model="sgjlRuleForm.remark"></el-input>
        </el-form-item>
        <el-form-item label="现场图片/视频" prop="log_file">

          <div class="file-list-box">
            <!--  accept=".zip,.ppt,.ppsx,.pptx,pdf" -->
            <el-upload multiple accept="image/*,video/*" class="avatar-uploader" action="#" :show-file-list="false"
              :auto-upload="false" list-type="picture-card" :on-change="(file, fileList) => {
                sgjlChangeFile(file, fileList, 'log_file');
              }
                ">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="file-item-box" v-for="(item, index) in sgjlRuleForm.log_file" :key="index">
              <div class="el-icon-delete-box" @click="sgjlFileRemove(index, 'log_file')">
                <i class="el-icon-error"></i>
              </div>
              <el-tooltip class="item" effect="dark" :content="item.name || item.file_name" placement="top">
                <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
              </el-tooltip>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sgjlSubmit('sgjlRuleForm')" :disabled="diaLoading"
          :loading="diaLoading">提交</el-button>
        <el-button @click="sgjlCancel('sgjlRuleForm')">关闭</el-button>
      </span>
    </div>
  </div>
</template>
<script>
import common from "@/api/common";
import configApi from "@/api/configApi";
import projectApi from "@/api/projectApi";

export default {
  name: "addSgRz",
  data() {
    return {
      diaLoading: false,
      sgjlRuleForm: {
        content: "",
        construction_progress: 20,
        is_overdue: 2,
        overdue_type: "",
        overdue_type_id: "",
        reason_overdue: "",
        construction_stage: '',
        construction_stage_id: "",
        remark: "",
        log_file: [],
        overdue_completion_date: '',
        estimated_completion_date: '',
        project_id: "",
        risk_label: '',

      },
      sgjlRules: {
        project_id: [
          { required: true, message: "请选择项目名称", trigger: "change" },
        ],
        content: [
          { required: true, message: "请输入施工内容", trigger: "change" },
        ],
        construction_progress: [
          { required: true, message: "请选择施工进度", trigger: "change" },
        ],
        is_overdue: [
          { required: true, message: "请选择是否超期", trigger: "change" },
        ],
        overdue_type: [
          { required: true, message: "请选择超期类型", trigger: "change" },
        ],
        overdue_type_id: [
          { required: true, message: "请选择超期原因", trigger: "change" },
        ],
        construction_stage_id: [
          { required: true, message: "请选择施工阶段", trigger: "change" },
        ],
        overdue_completion_date: [
          { required: true, message: "请选择超期完工日期", trigger: "change" },
        ],
      },
      constructionProgressList: [
        {
          label: "待进场",
          value: 10,
        },
        {
          label: "施工中",
          value: 20,
        },
        {
          label: "一次预警",
          value: 30,
        },
        {
          label: "二次预警",
          value: 40,
        },
        {
          label: "已超期",
          value: 50,
        },
        {
          label: "停工中",
          value: 60,
        },
        {
          label: "已完工",
          value: 70,
        },
      ], //施工进度
      overdueTypeList: [], //超期类型
      constructionStageList: [],//施工阶段  
      projectList: [],//项目列表
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.getConstructionStage();//施工阶段
    this.selectProjectList();//项目列表
    this.getOverdueType();//超期类型
    this.$refs.sgjlRuleForm.resetFields();
  },
  methods: {
    // 超期类型
    getOverdueType() {
      configApi.getList({
        page: 1,
        num: 999
      }, 1).then(res => {
        console.log(res, "超期类型")
        if (res.code == 200) {
          this.overdueTypeList = res.data.list;
        }
      })
    },
    // 施工阶段
    getConstructionStage() {
      configApi.getList({
        page: 1,
        num: 999
      }, 0).then(res => {
        console.log(res, "施工阶段")
        if (res.code == 200) {
          this.constructionStageList = res.data.list;
        }
      })
    },
    // 项目列表
    selectProjectList() {
      common.selectProjectList({
        construction_status_arr: [45],
      }).then(res => {
        console.log(res, "项目列表")
        if (res.code == 200) {
          this.projectList = res.data;
        }
      })
    },
    sgjlCancel(formName) {
      this.$goBackTab(this);
    },
    // 提交施工日志
    sgjlSubmit(formName) {
      let sgjlRuleForm = this.sgjlRuleForm;
      console.log(sgjlRuleForm, "施工日志参数");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.diaLoading = true;
          let formdata = new FormData();
          formdata.append(
            "data",
            JSON.stringify({
              project_id: sgjlRuleForm.project_id,
              content: sgjlRuleForm.content,
              construction_progress: sgjlRuleForm.construction_progress,
              is_overdue: sgjlRuleForm.is_overdue,
              overdue_type: sgjlRuleForm.overdue_type,
              overdue_type_id: sgjlRuleForm.overdue_type_id,
              reason_overdue: sgjlRuleForm.reason_overdue || '',
              construction_stage: sgjlRuleForm.construction_stage,
              construction_stage_id: sgjlRuleForm.construction_stage_id,
              remark: sgjlRuleForm.remark,
              risk_label: sgjlRuleForm.risk_label,
              overdue_completion_date: sgjlRuleForm.overdue_completion_date,
              estimated_completion_date: sgjlRuleForm.estimated_completion_date,
              reason_overdue: sgjlRuleForm.reason_overdue,
              node_name: ""
            })
          );
          sgjlRuleForm.log_file.forEach((item) => {
            formdata.append("log_file[]", item.raw);
          });
          projectApi
            .addConstructionLogs(formdata)
            .then((res) => {
              console.log(res, "提交施工日志");
              this.diaLoading = false;
              if (res.code == 200) {
                this.sgjlCancel();
              }
              this.$message({
                type: res.code == 200 ? "success" : "warning",
                message: res.code == 200 ? "处理成功" : res.message,
              });
            })
            .catch((err) => {
              this.diaLoading = false;
              this.$message({
                type: "warning",
                message: err.message,
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    sgjlChangeFile(file, list, type) {
      let sgjlRuleForm = this.sgjlRuleForm;
      sgjlRuleForm.log_file.push(file);
      this.sgjlRuleForm = sgjlRuleForm;
    },
    sgjlFileRemove(index, type) {
      let sgjlRuleForm = this.sgjlRuleForm;
      sgjlRuleForm.log_file.splice(index, 1);
      this.sgjlRuleForm = sgjlRuleForm;
    },
    // 施工阶段选择
    constructionStageFunc(e) {
      if (!e) return;
      let constructionStageList = this.constructionStageList;
      let construction_stage = [];
      e.forEach(item => {
        let index = constructionStageList.findIndex(i => {
          return item == i.id;
        })
        construction_stage.push(constructionStageList[index].name);
      })
      this.sgjlRuleForm.construction_stage = construction_stage.join(',');
    },
    // 超期类型
    overdueTypeChangeFunc(e) {
      if (!e) return;
      let overdueTypeList = this.overdueTypeList;
      let index = overdueTypeList.findIndex(item => {
        return e == item.id;
      })
      this.sgjlRuleForm.overdue_type = overdueTypeList[index].name;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/addPage.scss";
</style>